<template>
  <div class="admin-dashboard">
    <h1>管理员仪表盘</h1>
    
    <!-- 数据概览卡片 -->
    <div class="stats-grid">
      <div class="stat-card">
        <h3>总销售额</h3>
        <p>¥{{ stats.totalSales.toFixed(2) }}</p>
      </div>
      <div class="stat-card">
        <h3>总订单数</h3>
        <p>{{ stats.totalOrders }}</p>
      </div>
      <div class="stat-card">
        <h3>用户总数</h3>
        <p>{{ stats.totalUsers }}</p>
      </div>
      <div class="stat-card">
        <h3>商品总数</h3>
        <p>{{ stats.totalProducts }}</p>
      </div>
    </div>

    <!-- 最近订单 -->
    <div class="section">
      <h2>最近订单</h2>
      <div class="table-container">
        <table v-if="recentOrders.length > 0">
          <thead>
            <tr>
              <th>订单号</th>
              <th>用户</th>
              <th>金额</th>
              <th>状态</th>
              <th>时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in recentOrders" :key="order.orderNumber">
              <td>{{ order.orderNumber }}</td>
              <td>{{ order.username }}</td>
              <td>¥{{ order.totalAmount }}</td>
              <td>
                <span :class="['status-badge', order.status]">
                  {{ order.statusText }}
                </span>
              </td>
              <td>{{ order.createTime }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="no-data">暂无订单数据</p>
      </div>
    </div>

    <!-- 库存预警 -->
    <div class="section">
      <h2>库存预警</h2>
      <div class="table-container">
        <table v-if="lowStockDrugs.length > 0">
          <thead>
            <tr>
              <th>药品名称</th>
              <th>分类</th>
              <th>当前库存</th>
              <th>单价</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="drug in lowStockDrugs" :key="drug.id">
              <td>{{ drug.name }}</td>
              <td>{{ drug.category }}</td>
              <td>{{ drug.stock }}</td>
              <td>¥{{ drug.price }}</td>
              <td>
                <span :class="['stock-badge', drug.stockStatus === '无库存' ? 'out-of-stock' : 
                       drug.stockStatus === '严重不足' ? 'critical' : 'low']">
                  {{ drug.stockStatus }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
        <p v-else class="no-data">暂无库存预警</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { API_ENDPOINTS } from '../../config/api';

export default {
  name: 'AdminDashboard',
  setup() {
    const stats = ref({
      totalUsers: 0,
      totalProducts: 0,
      totalOrders: 0,
      totalSales: 0
    });
    const recentOrders = ref([]);
    const lowStockDrugs = ref([]);

    const fetchDashboardData = async () => {
      try {
        console.log('正在获取仪表盘数据...');
        const response = await axios.get(API_ENDPOINTS.ADMIN.DASHBOARD);
        console.log('仪表盘数据响应:', response.data);

        if (response.data) {
          stats.value = {
            totalUsers: Number(response.data.totalUsers) || 0,
            totalProducts: Number(response.data.totalProducts) || 0,
            totalOrders: Number(response.data.totalOrders) || 0,
            totalSales: Number(response.data.totalSales) || 0
          };
          recentOrders.value = response.data.recentOrders || [];
          lowStockDrugs.value = response.data.lowStockDrugs || [];
        }
      } catch (error) {
        console.error('获取仪表盘数据失败:', error);
        if (error.response) {
          console.error('错误响应:', error.response.data);
        }
      }
    };

    onMounted(() => {
      fetchDashboardData();
    });

    return {
      stats,
      recentOrders,
      lowStockDrugs,
      refreshData: fetchDashboardData
    };
  },
  methods: {
  }
};
</script>

<style scoped>
.admin-dashboard {
  padding: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-card h3 {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.stat-card p {
  margin: 10px 0 0;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.section h2 {
  margin: 0 0 20px;
  color: #333;
}

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background: #f5f5f5;
  font-weight: 600;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.status-badge.processing {
  background: #cce5ff;
  color: #004085;
}

.status-badge.completed {
  background: #d4edda;
  color: #155724;
}

.status-badge.cancelled {
  background: #f8d7da;
  color: #721c24;
}

.stock-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.stock-badge.out-of-stock {
  background: #f8d7da;
  color: #721c24;
}

.stock-badge.critical {
  background: #fff3cd;
  color: #856404;
}

.stock-badge.low {
  background: #cce5ff;
  color: #004085;
}

.no-data {
  text-align: center;
  color: #666;
  padding: 20px;
}
</style> 